<!--
 * @Descripttion: 对接日志
 * @version:
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-04-13 10:36:59
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-05-12 11:39:55
-->

<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="searchBox searchInputWidth">
              <el-form :inline="true" :model="filterField" ref="accountForm">
                <el-col :lg="8" :xl="6">
                  <el-form-item label="时间" class="row-padding-bottom">
                    <timeSelection
                      @getStartTimeValue="getStartTimeValue"
                      @getEndTimeValue="getEndTimeValue"
                    ></timeSelection>
                  </el-form-item>
                </el-col>
                <el-col :lg="8" :xl="6">
                  <el-form-item label="appId" class="row-padding-bottom">
                    <el-input
                      placeholder="请输入appId"
                      clearable
                      v-model="filterField.appId"
                      @input="change($event)"
                    />
                  </el-form-item>
                </el-col>
                <template v-if="advanced">
                  <el-col :lg="8" :xl="6">
                    <el-form-item label="接口名称" class="row-padding-bottom">
                      <el-input
                        placeholder="请输入接口名称"
                        clearable
                        v-model="filterField.methodName"
                        @input="change($event)"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :lg="8" :xl="6">
                    <el-form-item label="序列号" class="row-padding-bottom">
                      <el-input
                        placeholder="请输入序列号"
                        clearable
                        v-model="filterField.requestSerialCode"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :lg="8" :xl="6">
                    <el-form-item label="处理状态" class="row-padding-bottom">
                      <el-select
                        placeholder="请选择"
                        v-model="filterField.parseStatus"
                        clearable
                      >
                        <el-option label="处理中" value="0" />
                        <el-option label="处理成功" value="1" />
                        <el-option label="处理失败" value="2" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </template>
                <el-form-item>
                  <a
                    @click="toggleAdvanced"
                    style="margin-left: 40px; color: #409eff; cursor: pointer"
                    class="btnColor"
                  >
                    {{ advanced ? '收起' : '展开' }}
                    <i
                      :class="
                        advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                      "
                    ></i>
                  </a>
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchTable"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <div class="spacing"></div>
            <!-- 表格 -->
            <div
              ref="tableBox"
              :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
            >
              <el-table
                ref="tableBox1"
                :max-height="tableHeight"
                :data="tableData"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                v-loading="loading"
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column
                  align="center"
                  prop="createTime"
                  label="时间"
                  :formatter="formatTd"
                  min-width="180px"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="appId"
                  label="appId"
                  :formatter="formatTd"
                  min-width="280px"
                ></el-table-column>
                <el-table-column label="接口名称" width="230">
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.methodName"
                      :columnName="'methodName'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="requestSerialCode"
                  label="序列号"
                  :formatter="formatTd"
                  min-width="280px"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="parseStatusName"
                  label="处理状态"
                  width="100"
                  :formatter="formatTd"
                >
                  <template slot-scope="scope">
                    <p
                      v-if="scope.row.parseStatusName == '处理失败'"
                      style="color: #ff4242"
                    >
                      处理失败
                    </p>
                    <p v-else>{{ scope.row.parseStatusName }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  align="left"
                  label="操作"
                  width="250px"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-link type="primary" @click="toDetail(scope.row)"
                        >查看详情</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
                <div slot="empty" v-show="isShow">
                  <emptyTable emptyText="暂无相关信息"></emptyTable>
                </div>
              </el-table>
              <Pagination
                ref="pagination"
                @getList="getTableList"
                :requestUrl="requestUrl"
                :filterField="filterField"
                :pageSize="pageSize"
                :pageSizes="pageSizes"
              ></Pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--查看详情-->
    <el-dialog
      :title="title"
      :visible.sync="templateDialog"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
    >
      <el-form :model="form" ref="form" :rules="formRules" label-width="110px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="序列号">
              <el-input
                disabled
                v-model="form.requestSerialCode"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="appId">
              <el-input disabled v-model="form.appId" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="方法名">
              <el-input disabled v-model="form.methodName" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本号">
              <el-input disabled v-model="form.version" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="请求体">
              <el-input
                type="textarea"
                resize="none"
                disabled
                :rows="3"
                v-model="form.request"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="状态响应码">
              <el-input disabled v-model="form.code" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="响应信息">
              <el-input
                type="textarea"
                resize="none"
                disabled
                :rows="3"
                v-model="form.content"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="解析状态">
              <el-input
                disabled
                v-model="form.parseStatusName"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="解析信息">
              <el-input
                type="textarea"
                resize="none"
                disabled
                :rows="3"
                v-model="form.message"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'dockingLog',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      titleText: '查看日志',
      title: '日志详情',
      back: true,
      projectInfo: {},
      form: {},
      requestUrl: 'api-m/inputLog/base/v1/page', //表格请求路径
      filterField: {
        createStartTime: '',
        appId: '',
        createEndTime: '',
        requestSerialCode: '', //序列号
        parseStatus: '', //处理状态
      },
      tableData: [],
      loading: false,
      isShow: false,
      templateDialog: false,
      type: '',
      appidPage: '',
      page: '',
      id: '',
    }
  },
  created() {
    this.type = this.$route.query.type
    this.filterField.appId = this.$route.query.appId
    this.appidPage = this.$route.query.appId
    this.page = this.$route.query.page
    this.id = this.$route.query.id
    // this.filterField.appId = "e5bacf5a340f45569670d69a39cd1dc5";
    if (this.$route.query.methodName) {
      this.filterField.methodName = this.$route.query.methodName
    }
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    change(e) {
      this.$forceUpdate()
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.createStartTime = val
      } else {
        this.filterField.createStartTime = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.createEndTime = val
      } else {
        this.filterField.createEndTime = ''
      }
    },
    //查看详情
    toDetail(row) {
      this.templateDialog = true
      this.getDetail(row.id)
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    goBack() {
      if (this.type == 'zs') {
        this.$router.push('/home/interfacePlatform/equipmentAppid')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppid',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'cs') {
        this.$router.push('/home/interfacePlatform/equipmentAppidCs')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'jszs' && this.page == 'detail') {
        this.$router.push({
          path: '/home/interfacePlatform/equipmentAppidDetailJs',
          name: 'equipmentAppidDetailJs',
          query: {
            id: this.id,
            appId: this.appidPage,
            typePage: 'jszs',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'jszs' && this.page == 'home') {
        this.$router.push('/home/interfacePlatform/equipmentAppidJs')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'appList') {
        this.$router.push('/home/interfacePlatform/appManageList')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/appManageList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'interfaceList') {
        this.$router.push('/home/interfacePlatform/interfaceManageList')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/interfaceManageList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'jscs' && this.page == 'detail') {
        this.$router.push({
          path: '/home/interfacePlatform/equipmentAppidDetailJs',
          name: 'equipmentAppidDetailJs',
          query: {
            id: this.id,
            appId: this.appidPage,
            typePage: 'jscs',
          },
        })
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJsCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else if (this.type == 'jscs' && this.page == 'home') {
        this.$router.push('/home/interfacePlatform/equipmentAppidJsCs')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJsCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-m/inputLog/base/v1/detail',
        data: {
          id: id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.form = response.data.result || {}
            this.form.code = '200'
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>
<style scoped lang="less">
.mainCon {
  top: 194px;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidth {
  width: 126px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.detailInfoItem {
  margin-top: 28px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag-item {
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 20px;
  line-height: 18px;
  width: 60px;
  margin-left: 12px;
}
@import '../../../static/css/filterArea.less';
</style>
